<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <link rel="stylesheet" href="../js/bootstrap/css/bootstrap.min.css">
    <link rel="icon" href="../js/shop/assets/img/favicon.ico">
    <link rel="stylesheet" type="text/css" href="../js/shop/css/webbase.css" />
    <link rel="stylesheet" type="text/css" href="../js/shop/css/pages-JD-index.css" />
    <link rel="stylesheet" type="text/css" href="../js/shop/css/widget-jquery.autocomplete.css" />
    <link rel="stylesheet" type="text/css" href="../js/shop/css/widget-cartPanelView.css" />
    <title>商城首页</title>
</head>
<body>
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">飞狐乐购</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right" id="navDiv">
                <li><a href="login.html">登录</a></li>
                <li><a href="reg.html">注册</a></li>
            </ul>
        </div>

    </div>
</nav>
<div id="nav-bottom">
    <!--顶部-->
    <div class="nav-top">
        <!--头部-->
        <div class="header">
            <div class="py-container">
                <div class="yui3-g NavList">
                    <div class="yui3-u Left all-sort">
                        <h4>全部商品分类</h4>
                    </div>
                    <div class="yui3-u Center navArea">
                        <ul class="nav">
                            <li class="f-item">服装城</li>
                            <li class="f-item">美妆馆</li>
                            <li class="f-item">品优超市</li>
                            <li class="f-item">全球购</li>
                            <li class="f-item">闪购</li>
                            <li class="f-item">团购</li>
                            <li class="f-item">有趣</li>
                        </ul>
                    </div>


                </div>
            </div>
        </div>
    </div>
</div>

<!--列表-->
<div class="sort">
    <div class="py-container">
        <div class="yui3-g SortList ">
            <div class="yui3-u Left all-sort-list">
                <div class="all-sort-list2" id="cateDiv">

                </div>
            </div>
        </div>
    </div>
</div>

<div class="container">

    <div class="row" >
        <div class="col-md-12">
            <div class="panel panel-success">
                <div class="panel-heading">商品列表</div>
                <div class="panel-body" >
                    <div class="row" id="productListDiv">
                        
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row" >
        <div class="col-md-12">
            <div class="panel panel-success">
                <div class="panel-heading">热销品牌</div>
                <div class="panel-body" id="brandListDiv">

                </div>
            </div>
        </div>
    </div>


</div>

<!--当你的模板布局比较复杂的时候-->
<div id="productTemplate" style="display:none;">
    <div class="col-sm-6 col-md-3">
        <div class="thumbnail">
            <img src="##imgUrl##" alt="...">
            <div class="caption">
                <h3 style="color: red">价格:￥##price##</h3>
                <p><b>商品名:##productName##</b></p>
                <p><a href="#" class="btn btn-primary" role="button" onclick="buy('##productId##')">购买</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
            </div>
        </div>
    </div>
</div>

<div id="passwordDiv" style="display: none">
    <form class="form-horizontal" >
        <div class="form-group">
            <label  class="col-sm-4 control-label">旧密码:</label>
            <div class="col-sm-4">
                <input type="text" id="oldPassword" class="form-control" placeholder="请输入旧密码">
            </div>
        </div>
        <div class="form-group">
            <label  class="col-sm-4 control-label">新密码:</label>
            <div class="col-sm-4">
                <input type="text" id="password" class="form-control" placeholder="请输入新密码">
            </div>
        </div>
        <div class="form-group">
            <label  class="col-sm-4 control-label">确认密码:</label>
            <div class="col-sm-4">
                <input type="text" id="confirmPassword" class="form-control" placeholder="请输入确认密码">
            </div>
        </div>
    </form>
</div>

<script src="../js/jquery-3.3.1.js"></script>
<script src="../js/common/common.js"></script>
<script src="../js/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/shop/js/pages/index.js"></script>
<script src="../js/bootbox/bootbox.min.js"></script>
<script src="../js/bootbox/bootbox.locales.min.js"></script>
<script>
    $(function () {
        findMember();
        initCate();
        initProduct();
    })


    function buy(id) {
        let v_token = sessionStorage.getItem(config.X_TOKEN);
        if (!v_token) {
            alert("请先登录");
            return;
        }
        // 用户已经登录了
        var v_param = {};
        v_param.productId = id;
        v_param.count = 1;
        $.ajax({
            type:"post",
            url:config.SERVER_URL+"carts",
            data:v_param,
            beforeSend:function(xhr) {
                xhr.setRequestHeader(config.X_AUTH, v_token);
            },
            success:function (res) {
                if (res.code == 200) {
                    location.href = "cart.html";
                } else {
                    alert("请登录");
                }
            }
        })
    }

    function findMember() {
        // 获取sessionStorage中的token
        let v_token = sessionStorage.getItem(config.X_TOKEN);
        // 如果没有token,那就证明 会员没有登陆
        // 没有必要发送请求【必须登录后才能访问的接口】
        if (v_token) {
            $.ajax({
                type:"post",
                url:config.SERVER_URL+"members/findMember",
                beforeSend(xhr) {
                    xhr.setRequestHeader(config.X_AUTH, v_token);
                },
                success(res) {
                    if (res.code == config.SUCCESS) {
                        $("#navDiv").html(
                            '<li><a href="#">欢迎'+res.data+'登录</a></li>\n' +
                            '<li><a href="#" onclick="showDlg();">修改个人密码</a></li>\n' +
                            '<li><a href="orderlist.html" >订单列表</a></li>\n' +
                            '<li><a href="cart.html">购物车【<span id="cartItemCount">0</span>】</a></li>'+
                            '<li><a href="#" onclick="logout();">注销</a></li>'
                        );
                        // 发送请求，获取数量
                        findCount();
                    }
                }
            })
        }
    }



    function findCount() {
        // 获取sessionStorage中的token
        let v_token = sessionStorage.getItem(config.X_TOKEN);
        // 如果没有token,那就证明 会员没有登陆
        // 没有必要发送请求【必须登录后才能访问的接口】
        if (v_token) {
            $.ajax({
                type:"get",
                url:config.SERVER_URL+"/carts/findCount",
                beforeSend(xhr) {
                    xhr.setRequestHeader(config.X_AUTH, v_token);
                },
                success:function (res) {
                    if (res.code == config.SUCCESS) {
                        let v_count = res.data;
                        if (v_count) {
                            $("#cartItemCount").html(v_count);
                        }
                    }
                }
            })
        }
    }

    function showDlg() {
        // 备份
        let v_html = $("#passwordDiv").html();
        // 弹出框
        // 弹框
        let v_password_dlg = bootbox.dialog({
            title: '修改密码',
            message:$("#passwordDiv form"),
            size:"normal",
            buttons: {
                confirm: {
                    label: '<span class="glyphicon glyphicon-ok"></span>确认',
                    className: 'btn-primary',
                    callback: function(){
                        var v_param = {};
                        v_param.oldPassword = $("#oldPassword", v_password_dlg).val();
                        v_param.newPassword = $("#password", v_password_dlg).val();
                        v_param.confirmPassword = $("#confirmPassword", v_password_dlg).val();
                        console.log(v_param);
                        let v_token = sessionStorage.getItem(config.X_TOKEN);
                        // 修改密码，调用后台
                        $.ajax({
                            type:"post",
                            url:config.SERVER_URL+"members/updatePassword",
                            data:v_param,
                            beforeSend(xhr) {
                                xhr.setRequestHeader(config.X_AUTH, v_token);
                            },
                            success:function (res) {
                                if (res.code == config.SUCCESS) {
                                    // 删除客户端 token
                                    sessionStorage.removeItem(config.X_TOKEN);
                                    // 刷新
                                    location.href = "index.html";
                                } else {
                                    bootbox.alert({
                                        message: "<span class='glyphicon glyphicon-exclamation-sign'></span>"+res.msg,
                                        size: 'small',
                                        title: "提示信息"
                                    });
                                }
                            }
                        })
                    }
                },
                cancel: {
                    label: '<span class="glyphicon glyphicon-remove"></span>取消',
                    className: 'btn-danger'
                }
            }
        });
        // 还原
        $("#passwordDiv").html(v_html);
    }

    function logout() {
        let v_token = sessionStorage.getItem(config.X_TOKEN);
        if (v_token) {
            $.ajax({
                type:"post",
                url:config.SERVER_URL+"members/logout",
                beforeSend(xhr) {
                    xhr.setRequestHeader(config.X_AUTH, v_token);
                },
                success(res) {
                    if (res.code == config.SUCCESS) {
                        // 清空客户端sessionStorage中的token
                        sessionStorage.removeItem(config.X_TOKEN);
                        // 刷新页面
                        location.href="index.html";
                    }
                }
            })
        }
    }

    function initProduct() {
        let v_token = sessionStorage.getItem(config.X_TOKEN);
        if (v_token) {
            $.ajax({
                type:"get",
                url:config.SERVER_URL+"/products",
                beforeSend:function (xhr) {
                    // 发送请求前执行 [设置自定义的头信息]
                    xhr.setRequestHeader(config.X_AUTH, v_token);
                },
                success(res) {
                    if (res.code == config.SUCCESS) {
                        let v_productList = res.data;
                        console.log(res);
                        let v_templateHtml = $("#productTemplate").html();
                        let v_resultHtml = "";
                        for (let v_product of v_productList) {
                            v_resultHtml += v_templateHtml.replace(/##imgUrl##/g, v_product.mainImage)
                                .replace(/##price##/g, v_product.price)
                                .replace(/##productId##/g, v_product.id)
                                .replace(/##productName##/g, v_product.productName);

                        }
                        $("#productListDiv").html(v_resultHtml);
                    }
                }
            })
        }

    }

    let v_html = "";
    let v_cateList;
    function initCate() {
        $.ajax({
            type:"get",
            url:config.SERVER_URL+"/cates",
            success:function (res) {
                console.log(res);
                if (res.code == config.SUCCESS) {
                    v_cateList = res.data;
                    buildCate1();
                    // 插入组装好的html
                    $("#cateDiv").html(v_html);
                    // 初始化
                    initCss();
                }
            }
        })
    }

    function buildCate1() {
        // 查找一级分类
        let v_cate1Arr = getChilds(0);
        for (let v_cate1 of v_cate1Arr) {
            v_html += '<div class="item">\n' +
                '                        <h3><a href="">'+v_cate1.cateName+'</a></h3>\n' +
                '                        <div class="item-list clearfix">\n' +
                '                            <div class="subitem">';
            buildCate2(v_cate1.id);
            v_html += '</div></div></div>'
        }
    }

    function buildCate2(id) {
        let v_cate2Arr = getChilds(id);
        for (let v_cate2 of v_cate2Arr) {
            v_html += ' <dl class="fore1">\n' +
                '                                    <dt><a href="">'+v_cate2.cateName+'</a></dt>\n' +
                '                                    <dd>';
            buildCate3(v_cate2.id)
            v_html += '</dd></dl>'
        }
    }

    function buildCate3(id) {
        let v_cate3Arr = getChilds(id);
        for (let v_cate3 of v_cate3Arr) {
            v_html += ' <em><a href="">'+v_cate3.cateName+'</a></em>';
        }
    }

    function getChilds(id) {
        let v_childs = [];
        for (let v_cate of v_cateList) {
            if (id == v_cate.fatherId) {
                v_childs.push(v_cate);
            }
        }
        return v_childs;
    }

    function initCss() {
        $('.all-sort-list2 > .item').hover(function() {
            //父类分类列表容器的高度

            $(this).addClass('hover');
            $(this).children('.item-list').css('display', 'block');
        }, function() {
            $(this).removeClass('hover');
            $(this).children('.item-list').css('display', 'none');
        });

        $('.item > .item-list > .close').click(function() {
            $(this).parent().parent().removeClass('hover');
            $(this).parent().hide();
        });
    }
    
</script>
</body>
</html>